<template>
    <div>
        <mixinsObj></mixinsObj>
        <el-card>
            <el-alert title="添加商品" type="warning" center>
            </el-alert>
            <el-steps :space="400" :active="Number(active)" finish-status="success" align-center>
                <el-step title="已完成"></el-step>
                <el-step title="进行中"></el-step>
                <el-step title="步骤 3"></el-step>
            </el-steps>
            <el-form ref="formAddGoods" :model="formObj" label-width="80px" :rules="addGoodsFrom">
                <template>
                    <el-tabs tab-position="left" style="height: 400px;" v-model="active" :before-leave="leaveTabs">
                        <el-tab-pane label="基本信息">
                            <el-form-item label="商品名称" prop="goods_name">
                                <el-input v-model="formObj.goods_name"></el-input>
                            </el-form-item>
                            <el-form-item label="商品价格" prop="goods_price">
                                <el-input v-model="formObj.goods_price"></el-input>
                            </el-form-item>
                            <el-form-item label="商品重量" prop="goods_weight">
                                <el-input v-model="formObj.goods_weight"></el-input>
                            </el-form-item>
                            <el-form-item label="商品数量" prop="goods_number">
                                <el-input v-model="formObj.goods_number"></el-input>
                            </el-form-item>
                            <el-form-item label="活动名称">
                                <el-cascader v-model="value" :options="options" @change="handleChange" :props="props">
                                </el-cascader>
                            </el-form-item>

                        </el-tab-pane>
                        <el-tab-pane label="商品图片">
                            <el-upload class="upload-demo" action="http://82.156.12.132:8080/api/private/v1/upload"
                                :on-success="handelSuccess" :headers="headers" :on-remove="handleRemove"
                                list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-tab-pane>
                        <el-tab-pane label="商品内容">
                            <quill-editor v-model="formObj.goods_introduce" ref="myQuillEditor"></quill-editor>
                            <el-button @click="add()">添加商品</el-button>
                        </el-tab-pane>
                    </el-tabs>
                </template>



            </el-form>
        </el-card>
    </div>
</template>
<script>
import mixinsObj from '@/views/mixins.vue'
import { cateList } from '@/utils/categories'
import { getAdd, editGoods, updateGoods } from '@/utils/Addgoods'
export default {
    components: { mixinsObj },
    data() {
        return {
            active: '',
            formObj: {
                goods_name: '',
                goods_price: '',
                goods_weight: '',
                goods_number: '',
                goods_introduce: '',
                goods_cat: '',
                pics: [],
                goods_id: ''
            },
            options: [],
            value: [],
            props: {
                value: 'cat_id',
                label: 'cat_name'
            },
            headers: {},
            addGoodsFrom: {
                goods_name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                goods_price: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                goods_weight: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                goods_number: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ]
            },
            flag: false,
            id: 0,
            type: ''


        }
    },
    methods: {
        async add() {
            if (this.type == 'add') {
                let { data: res } = await getAdd(this.formObj)
                if (res.meta.status == 201) {
                    this.$message.success(res.meta.msg)
                    this.$router.push('/goods')
                } else {
                    this.$message.error(res.meta.msg)
                }
            } else if (this.type == 'edit') {
                let { data: res } = await updateGoods(this.formObj.goods_id, this.formObj)
                if (res.meta.status == 200) {
                    this.$message.success(res.meta.msg)
                    this.formObj = res.data
                    this.$router.push('/goods')
                } else {
                    this.$message.error(res.meta.msg)
                }

            }

        },
        handleChange(res) {


        },
        async getList() {
            let { data: res } = await cateList({ type: 3 })
            this.options = res.data
        },
        handelSuccess(res) {
            let pic = res.data.tmp_path
            this.formObj.pics.push(pic)
        },
        handleRemove() {

        },
        leaveTabs(newName, oldName) {

            if (oldName == 0) {
                if (this.value.length == 0) {
                    this.$message.error('请先设置分类')
                    return false
                }
                // else if(
                //     this.form.goods_name==''||
                //     this.form.goods_price==''||
                //     this.form.goods_weight==''||
                //     this.form.goods_number==''
                // ){
                //     this.$message.error('请先填写表单')
                //     return false
                // }
                this.$refs.formAddGoods.validate((valid) => {
                    this.flag = valid
                });
                if (!this.flag) {
                    this.$message.error('请先填写表单')
                    return false
                }
            }
        },
        async getEdit() {
            let { data: res } = await editGoods(this.id)
            this.formObj = res.data

        }
    },
    mounted() {
        this.getList()
        let token = ''
        if (this.$store.state.tokenObj.token) {
            token = this.$store.state.tokenObj.token
        }
        this.headers.Authorization = token

        this.id = this.$route.query.id
        this.type = this.$route.query.type


        if (this.type == 'edit') {
            this.getEdit()
        }
    }
}
</script>


<style lang="scss">
.el-steps {
    margin-top: 20px;
}
</style>